<!-- 商品列表 -->
<template>
    <div class="pageContent">
        <!-- 列表头部 -->
        <div class="shopTitle">
            <div class="shopListOne">成员管理</div>
            <div class="shopListTwo">
                <el-button @click="refresh">刷新</el-button>
            </div>
        </div>
        <!-- 内容 -->
        <div class="shopListContent">
            <!-- 筛选查询 -->
            <div class="shopSift">
                <el-collapse v-model="activeNames" style="border-left: 1px solid #e4e4e4;border-right: 1px solid #e4e4e4;"
                    class="chaxun">
                    <el-collapse-item title="筛选查询" name="1">
                        <div class="siftContent">
                            <el-form :inline="true" class="demo-form-inline" :model="check" label-width="80px">
                                <el-form-item label="关键词">
                                    <el-input v-model="check.memberAccountOrName" placeholder="成员账号 / 姓名"></el-input>
                                </el-form-item>
                                <el-form-item label="角色">
                                    <el-select v-model="check.role" placeholder="全部">
                                        <el-option v-for="item, index in roleList" :key="index" :label="item.roleName"
                                            :value="item.roleId"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="checkMember">筛选</el-button>
                                    <el-button @click="resetting">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    <!-- <div class="siftButton">
                            <el-button type="info" @click="resetting">重置</el-button>
                            <el-button type="info" @click="checkMember">筛选</el-button>
                                                    </div> -->
                    </el-collapse-item>
                </el-collapse>
            </div>
            <!-- 数据列表 -->
            <div class="shopListData">
                <div class="dataHead">
                    <div class="dataHead-left">数据列表</div>
                    <div class="dataHead-right">
                        <el-button type="primary" class="rightsx" @click="goAddUser">添加</el-button>
                        <!-- <el-tag effect="plain"> 关联标签 </el-tag> -->
                    </div>
                </div>
                <div>
                    <el-table border style="width: 100%" :data="tableData">

                        <el-table-column label="序号" width="70" align="center">
                            <template v-slot="scope">
                                {{ scope.$index + 1 + (check.currentPage - 1) * check.pageSize }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="userName" label="成员账号" align="center" width="180" class="shopImage">
                        </el-table-column>
                        <el-table-column prop="nickName" label="姓名" width="80" align="center">
                        </el-table-column>
                        <el-table-column prop="phonenumber" label="手机号" align="center">
                        </el-table-column>
                        <el-table-column prop="email" label="邮箱" align="center" width='200'>
                        </el-table-column>
                        <el-table-column prop="role" label="角色" align="center">
                        </el-table-column>
                        <el-table-column prop="createTime" label="最近登录时间" align="center" width='200'>
                        </el-table-column>
                        <el-table-column prop="status" label="是否启用" align="center" width='150'>
                            <template v-slot="scope">
                                <el-switch :value="scope.row.status == 0" @change="isStart(scope.row.userId)"
                                    active-text="启用" inactive-text="禁用">
                                </el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template v-slot="scope">
                                <el-button type="text" size="small" @click="goUpdateUser(scope.row.userId,)">编辑</el-button>
                                <el-button type="text" size="small"
                                    @click="goDelUserRole(scope.row.userId, scope.row.roleId)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <!-- 分页 -->
            <el-pagination background layout="total, prev, pager, next, jumper" :total="count"
                @current-change="handleCurrentChange" :page-size="check.pageSize">
            </el-pagination>

            <!-- 编辑模态框 -->
            <!-- 查看模态框 -->
        </div>
    </div>
</template>
  
<script>
import { mapActions } from "vuex";
export default {
    name: "MemberManage",
    data() {
        return {
            activeNames: ["1"],
            tableData: [],
            count: 0,
            check: {//查询
                currentPage: 1,
                pageSize: 5,
                role: '',
                memberAccountOrName: ''
            },
            roleList: [],
        };
    },
    computed: {
        // ...mapGetters("shop", ["GetShopList"]),
    },
    created() {
        this.getMemberList()
        this.RoleList().then(res => {
            console.log(res);
            let arr = []
            res.data.forEach(item => {
                let { roleId, roleName } = item
                arr.push({ roleId, roleName })
            })
            this.roleList = arr
        })
    },
    mounted() {

    },
    methods: {
        ...mapActions("permission", ["MemberList", 'RoleList', 'UpdateMember', 'DelMember', 'DelMemberRole',]),
        //刷新
        refresh() {
            location.reload();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.check.currentPage = val
            this.getMemberList(this.check)
        },
        getMemberList() {//初始化页面渲染
            // console.log(obj);
            this.MemberList(this.check).then(res => {
                console.log(res);
                if (res.code == 200) {
                    this.tableData = res.data
                    this.count = res.count
                }
            });
        },

        isStart(userId) {//单个启用
            // console.log(roleId);
            let obj = this.tableData.find(item => {
                return item.userId == userId
            });
            // console.log(obj.statusA);
            obj.status = obj.status == 0 ? 1 : 0
            // console.log(data);
            this.UpdateMember(obj).then(res => {
                console.log(res);
            })
            // console.log(this.tableData);
        },

        goAddUser() {
            this.$router.push({
                path: '/home/Permission/AddMember',
            })
        }
        ,
        goUpdateUser(userId) {
            console.log(userId);
            this.$router.push({
                path: '/home/Permission/UpdateMember',
                query: { userId }
            })
        },
        goDelUserRole(userId, roleId) {
            this.$confirm('此操作将禁用并删除该成员角色, 是否继续?', '删除', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                console.log(userId, roleId);
                this.DelMemberRole({ userId, roleId }).then(res => {
                    console.log(res);
                    this.getMemberList()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        checkMember() {
            console.log(this.check);
            this.getMemberList()
        },
        resetting() {
            this.check = {//查询
                currentPage: 1,
                pageSize: 5,
                role: '',
                memberAccountOrName: ''
            },
                this.getMemberList()
        }

    },
};
</script>
  
<style scoped>
html div {
    font-size: 14px;
}

::-webkit-scrollbar {
    display: none;
}

.pageContent {
    width: 100%;
    box-sizing: border-box;
    height: 100%;
    /* overflow-y: scroll; */
}

.shopTitle {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f0f0f0;
}

.shopListOne {
    height: 26px;
    font-size: 18px;
    font-weight: 400;
    border-left: 6px solid #1cb09a;
    padding-left: 10px;
    margin-left: 20px;
}

.shopListTwo {
    margin-right: 35px;
}

.shopListTwo button {
    background-color: #1cb09a;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
}

.shopListContent {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
}

.shopTag {
    width: 95%;
    margin: 30px 0;
}

.shopTag .beforeTag {
    color: #2c3e50 !important;
    margin-right: 20px;
    cursor: pointer;
}

.shopSift {
    width: 95%;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #e4e4e4;
}

::v-deep .el-collapse {
    width: 100%;
}

::v-deep .el-collapse-item__header {
    box-sizing: border-box;
    padding: 0 18px;
    background-color: #f0f0f0;
}

.siftContent {
    box-sizing: border-box;
    padding: 30px 20px 0;
}

.el-form-item {
    margin-right: 80px;
}

.siftButton {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.siftButton .el-button {
    margin-right: 20px;
    padding: 12px 35px;
}

.shopListData {
    width: 95%;
    margin-top: 25px;
    background-color: #f0f0f0;
}

.dataHead {
    height: 50px;
    box-sizing: border-box;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dataHead-right {
    display: flex;
    align-items: center;
}

.dataHead-right .el-form-item .el-select {
    height: 34px;
    width: 130px;
}

::v-deep .dataHead-right .el-form-item .el-select .el-input__inner {
    line-height: 34px;
    height: 34px;
}

.dataHead-right .el-form-item {
    margin: 0 15px 0 0;
}

::v-deep .cell img {
    width: 100px;
    height: 100px;
}

.chaxun {
    margin: 0px auto;
}

.rightsx {
    margin-right: 20px;
    background-color: #1CB09A;
    padding: 0;
    width: 80px;
    height: 32px;
}
</style>